<template>
    <view>
        <view class="top">
            <view class="top-left">
                <view>机器序列号：{{baseList.machineSerialNumber}}</view>
                <view>机器型号：{{baseList.model}}</view>
                <view>入库时间：{{baseList.warehousingTime}}</view>
            </view>
            <view class="top-right">
                <img style="width:100px;height:100px" :src="`http://101.132.141.5:8081${baseList.image}`" alt="">
            </view>
        </view>
        <u-tabs class="tab" :list="tabTitle" :current="index" @change="changeFn" lineWidth="104rpx"
            :activeStyle="{ color:'#3286ed',fontWeight:'bold' }" lineColor="#3286ed"></u-tabs>
        <!-- tab里面的内容 -->
        <view class="box" v-if="index*1===0">
            <u-cell :border="true">
                <template #title>
                    <view class="u-cell-text">基本信息</view>
                </template>
            </u-cell>
            <u-cell-group>
                <u-cell>
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">机器序列号</text>
                        <text class="u-cell-text" style="margin-left: 10px;">{{baseList.machineSerialNumber}}</text>
                    </view>
                </u-cell>
                <u-cell>
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">机器型号</text>
                        <text class="u-cell-text" style="margin-left: 10px;color:#3286ed;">{{baseList.model}}</text>
                    </view>
                </u-cell>
                <u-cell>
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">采购入库时间</text>
                        <text class="u-cell-text" style="margin-left: 10px;">{{baseList.warehousingTime}}</text>
                    </view>
                </u-cell>
                <u-cell>
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">所在仓库</text>
                        <text class="u-cell-text" style="margin-left: 10px;">{{baseList.warehouseName}}</text>
                    </view>
                </u-cell>
                <u-cell>
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">状态</text>
                        <text class="u-cell-text" v-if="baseList.status==0" style="margin-left: 10px;">正常</text>
                        <text class="u-cell-text" v-if="baseList.status==1" style="margin-left: 10px;">不可使用</text>
                        <text class="u-cell-text" v-if="baseList.status==2" style="margin-left: 10px;">使用中</text>
                    </view>
                </u-cell>
                <u-cell>
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">二维码图片</text>
                        <img @click="open" style="width:50px;height:50px;padding-left: 10px;"
                            :src="`http://101.132.141.5:8081${baseList.qrImage}`"
                            alt="">
                        <!-- <img style="width:50px;height:50px" :src="baseList.qrImage" alt=""> -->
                        <u-popup :show="show" :closeOnClickOverlay="true" mode="center" :closeable="true"
                            @close="closeFn">
                            <img style="width:90%;height:90%;padding-left: 10px;"
                                :src="`http://101.132.141.5:8081${baseList.qrImage}`"
                                alt="">
                        </u-popup>
                    </view>
                </u-cell>
                <u-cell>
                    <view slot="title" class="u-slot-title">
                        <text class="u-cell-text">机器信息</text>
                        <text class="u-cell-text" style="margin-left: 10px;" v-html="baseList.information"></text>
                    </view>
                </u-cell>
            </u-cell-group>

        </view>
        <view class="box" v-if="index*1===3">
            <uni-table :border="true" stripe emptyText="暂无更多数据">
                <!-- 表头行 -->
                <uni-tr>
                    <uni-th align="center">机器序列号</uni-th>
                    <uni-th align="center">入库时间</uni-th>
                    <uni-th align="center">订单编号</uni-th>
                    <uni-th align="center">仓库名称</uni-th>
                </uni-tr>
                <!-- 表格数据行 -->
                <uni-tr v-for="(item) in WarehousingRecordList" :key="item.id">
                    <uni-td>{{item.machineSerialNumber}}</uni-td>
                    <uni-td>{{item.warehousingTime}}</uni-td>
                    <uni-td>{{item.orderNo}}</uni-td>
                    <uni-td>{{item.warehouseName}}</uni-td>

                </uni-tr>
            </uni-table>

        </view>
        <view class="box" v-if="index*1===2">
            <uni-table :border="true" stripe emptyText="暂无更多数据">
                <!-- 表头行 -->
                <uni-tr>
                    <uni-th align="center">出库编号</uni-th>
                    <uni-th align="center">订单编号</uni-th>
                    <uni-th align="center">发起人名称</uni-th>
                    <uni-th align="center">客户名称</uni-th>
                    <uni-th align="center">出库时间</uni-th>
                    <!-- <uni-th align="center">订单类型</uni-th> -->
                    <uni-th align="center">出库仓库</uni-th>
                     
                </uni-tr>
                <!-- 表格数据行 -->
                <uni-tr v-for="item in IssueLsit " :key="item.id">
                    <uni-td>{{item.outboundNo}}</uni-td>
                    <uni-td>{{item.orderNo}}</uni-td>
                    <uni-td>{{item.sponsorName}}</uni-td>
                    <uni-td>{{item.customerName}}</uni-td>
                    <uni-td>{{item.outboundTime}}</uni-td>
                    <!-- <uni-td>{{item.orderType}}</uni-td> -->
                    <uni-td>{{item.outboundWarehouseName}}</uni-td>
                     
                </uni-tr>
            </uni-table>

        </view>
        <view class="box" v-if="index*1===1">
            <uni-table :border="true" stripe emptyText="暂无更多数据">
                <!-- 表头行 -->
                <uni-tr>
                    <uni-th align="center">合同模板</uni-th>
                    <uni-th align="center">发起人</uni-th>
                    <uni-th align="center">业务员</uni-th>
                    <uni-th align="center">协同人</uni-th>
                    <uni-th align="center">信息提供人</uni-th>
                    <uni-th align="center">发起人所属部门</uni-th>
                    <uni-th align="center">订单编号</uni-th>
                    <uni-th align="center">订单发起日期</uni-th>
                    <uni-th align="center">业务所属公司</uni-th>
                    <uni-th align="center">订单类型</uni-th>
                    <uni-th align="center">客户名称</uni-th>
                    <uni-th align="center">客户所属省份</uni-th>
                    <uni-th align="center">项目名称</uni-th>
                    <uni-th align="center">租赁形式</uni-th>
                    <uni-th align="center">收货地址</uni-th>
                    <uni-th align="center">发货仓库</uni-th>
                   
                </uni-tr>
                <!-- 表格数据行 -->
                <uni-tr v-for="(item,index) in orderList" :key="index">
                    <uni-td>{{item.contractTemplate}}</uni-td>
                    <uni-td>{{item.sponsorName}}</uni-td>
                    <uni-td>{{item.salesmanName}}</uni-td>
                    <uni-td>{{item.collaboratorName}}</uni-td>
                    <uni-td>{{item.informationProviderName}}</uni-td>
                    <uni-td>{{item.sponsorDeptName}}</uni-td>
                    <uni-td>{{item.orderNo}}</uni-td>
                    <uni-td>{{item.orderDate}}</uni-td>
                    <uni-td>{{item.businessCompany}}</uni-td>
                    <uni-td>{{item.orderType}}</uni-td>
                    <uni-td>{{item.customerName}}</uni-td>
                    <uni-td>{{item.customerRegion}}</uni-td>
                    <uni-td>{{item.projectName}}</uni-td>
                    <uni-td>{{item.lease}}</uni-td>
                    <uni-td>{{item.address}}</uni-td>
                    <uni-td>{{item.deliveryWarehouseName}}</uni-td>
                    
                </uni-tr>
            </uni-table>

        </view>
    </view>
</template>

<script>
    import {getmachineOrder,getorderMachineList,machineList,searchMachineApi,getMachineRecordApi } from '@/api/machine/machine.js'
    import {getDicts} from '@/api/dictionary/index.js'
	export default {
        data() {
            return {
                index: 0,
                show: false, //控制二维码图片打开
                tabTitle: [{
                        name: '基本信息',
                    },
                    {
                        name: '租赁订单',
                    },
                    {
                        name: '出库单'
                    },
                    {
                        name: '入库记录'
                    },
                ],
                machineId: '', //机器id
                baseList: {}, //基本信息
                orderList: [], //机器所有租赁订单
                WarehousingRecordList: [], //入库单记录列表
                IssueLsit: [], //机器所有的出库单记录
				contractTemplateOptions:[],//合同模板
				businessOptions:[],//业务所属公司
				orderTypeOptions:[],
            };
        },
        onLoad(e) {
            this.getcontentList()
            this.getbusinessOpion()
			this.getorderTypeOptions()
            this.machineSerialNumber = e.machineSerialNumber
          
        },
		created() {
			  this.machineData()
		},
        methods: {
            // 获取所有机器筛选出选中机器的信息
            async machineData() {
                console.log(this.machineSerialNumber);
                const res = await machineList({
                    machineSerialNumber: this.machineSerialNumber
                })
                this.baseList = res.rows[0]
                console.log(this.baseList);
            },
            async changeFn(e) {
                this.index = e.index
                if (e.index === 0) {
                    return false
                }
                if (e.index === 1) {
					// 查询机器订单
                let res=await getMachineRecordApi({ searchType:3,
          machineId:this.baseList.id})
		  res.rows.forEach(item=>{
		  	item.contractTemplate=this.getValue(this.contractTemplateOptions,item.contractTemplate)
		    item.businessCompany=this.getValue(this.businessOptions,item.businessCompany)
		    item.orderType=this.getValue(this.orderTypeOptions,item.orderType)
		  })
				this.orderList=res.rows
                }
                if (e.index === 2) {
                    let res=await getMachineRecordApi({ searchType:2,
                    machineId:this.baseList.id})
                    this.IssueLsit = res.rows
                }
                if (e.index === 3) {
                    const res = await getorderMachineList({
                        machineId: this.baseList.id,
                    })
				 res.rows.forEach(item=>{
					 if(!item.outboundNo){
						 this.WarehousingRecordList.push(item)
					 }
				 })
					
                     
					
                }
            },
            open() {
                console.log('90');
                this.show = true
            },
            closeFn() {
                this.show = false
            },
			getValue(arr, item) {
			    for (var i = 0; i < arr.length; i++) {
			        if (item == arr[i].dictValue) {
			            return arr[i].dictLabel
			        }
			    }
			},
			// 获取合同模板
			async getcontentList(){
				let res= await getDicts('biz_contract_template')
				this.contractTemplateOptions=res.data
			},
            async getbusinessOpion(){
				let res=await getDicts('biz_business_company')
				this.businessOptions=res.data
			},
			async getorderTypeOptions(){
				let res=await getDicts('biz_order_type')
				this.orderTypeOptions=res.data
			}
        }
    }
</script>

<style lang="scss">
    .top {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: #fff;

        .top-left {
            padding-top: 10px;

            view {
                padding-bottom: 5px;
            }
        }
    }

    .tab {
        background-color: #fff;
        margin-top: 5px;
    }

    .box {
        background-color: #fff;
        padding: 10px 10px 10px 10px;

        .u-cell-text {
            font-size: 14px;
        }
    }
</style>
